<template>
    <!-- 修改资料 -->

    <div>
        <!-- 内容主题区域 -->
        <el-form v-if="form.carbonBrushSpecArray" label-width="90px" :model="form" label-position="right" ref="formRef"
            :disabled="disabled" :class="{ 'borderNone': disabled }">
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item prop="drawingNo">
                        <template #label>
                            <span v-if="!disabled" style="color: #f56c6c;margin-right: 4px;">*</span>
                            <span style="display:inline-block;">样品图号</span>
                        </template>
                        <el-input v-model="form.drawingNo"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item v-if="form.carbonBrushSpecArray" prop="carbonBrushSpec">
                        <template #label>
                            <span v-if="!disabled" style="color: #f56c6c;margin-right: 4px;">*</span>
                            <span style="display:inline-block;">碳刷规格</span>
                        </template>
                        <el-input v-model="form.carbonBrushSpecArray[0]" style="width:20%;"
                            class="borderNone"></el-input>x<el-input v-model="form.carbonBrushSpecArray[2]"
                            style="width:20%;" class="borderNone"></el-input>x<el-input
                            v-model="form.carbonBrushSpecArray[4]" style="width:20%;"
                            class="borderNone"></el-input>/<el-input v-model="form.carbonBrushSpecArray[6]"
                            style="width:20%;" class="borderNone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item prop="motorUsesSmallCategoryId">
                        <template #label>
                            <span v-if="!disabled" style="color: #f56c6c;margin-right: 4px;">*</span>
                            <span style="display:inline-block;">电机用途</span>
                        </template>
                        <el-cascader v-if="!disabled" ref="cascader" v-model="form.motorUsesSmallCategoryId"
                            :options="configData.motorUsesList" :props="casProps" @change="change" />
                        <el-input v-else v-model="form.motorUsesMainCategory"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="碟厚" prop="thickPlate">
                        <el-input v-model="form.thickPlate"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="额定电压" prop="ratedVoltage">
                        <el-radio-group v-model="form.ratedVoltage" style="margin-top: -4px;">
                            <template v-for="(item, index) in configData.voltageKindList" :key="index">
                                <el-radio :label="item.value" size="large">{{ item.label }}</el-radio>
                            </template>
                        </el-radio-group>
                        <el-input style="width: 20%;" v-model="form.voltageKind" class="borderNone"></el-input>V
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item prop="motorSpeed">
                        <template #label>
                            <span v-if="!disabled" style="color: #f56c6c;margin-right: 4px;">*</span>
                            <span style="display:inline-block;">电机转速</span>
                        </template>
                        <el-input v-model="form.motorSpeed" class="borderNone" style="width: 30%;"></el-input>rpm
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="额定功率" prop="ratedPower">
                        <el-input v-model="form.ratedPower" class="borderNone" style="width: 30%;"></el-input>W
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="抗电磁干扰" prop="defyEMI">
                        <el-radio-group v-model="form.defyEMI" style="margin-top: -4px;">
                            <template v-for="(item, index) in configData.requireList" :key="index">
                                <el-radio :label="item.value" size="large">{{ item.label }}</el-radio>
                            </template>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item prop="appointStuff">
                        <template #label>
                            <span v-if="!disabled" style="color: #f56c6c;margin-right: 4px;">*</span>
                            <span style="display:inline-block;">指定材料</span>
                        </template>
                        <el-radio-group v-model="form.appointStuff" style="margin-top: -4px;">
                            <template v-for="(item, index) in configData.haveNoList" :key="index">
                                <el-radio :label="item.value" size="large">{{ item.label }}</el-radio>
                            </template>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item v-if="form.appointStuff == '1'" label="指定材料" prop="appointStuffs">
                        <sc-table-select v-if="!disabled" v-model="appointStuffsRows" :inputWidth="700" multiple :limit="6"
                            :selectLabel="appointStuffsLabel" :apiObj="apiObj" :fileName="appointStuffsFileName"
                            :table-width="700" :props="tableProps" :mode="'select'" max-collapse-tags="6"
                            @change="appointStuffsChange">
                        </sc-table-select>
                        <el-input v-else v-model="form.appointStuffs" style="width:400px"> </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <sc-title title="测试指标客户要求"></sc-title>
            <el-scrollbar height="350px">
                <sc-form-table v-model="dataList" placeholder="暂无数据" disabled>
                    <template #tableContent>
                        <el-table-column prop="testParameterCode" label="测试指标代码" width="200">
                        </el-table-column>
                        <el-table-column prop="testParameterName" label="测试指标名称" width="200">
                        </el-table-column>
                        <el-table-column prop="unitName" label="单位" width="100">
                            <template #default="scope">
                                <el-select v-if="!disabled" v-model="scope.row.unitName" clearable placeholder="请选择：">
                                    <el-option v-for="item in configData.unitNameList" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                                <span v-else>{{ scope.row.unitName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="custRequire" label="客户要求" width="300">
                            <template #default="scope">
                                <el-select v-model="scope.row.custRequire"
                                    v-if="scope.row.testParameterCode == '07' && !disabled">
                                    <el-option v-for="item in scope.row.dataList" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-input v-else-if="!disabled" v-model="scope.row.custRequire"></el-input>
                                <span v-else>{{ scope.row.custRequire }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="说明" width="300">
                        </el-table-column>
                    </template>
                </sc-form-table>
            </el-scrollbar>
        </el-form>
    </div>
</template>

<script setup>
import { ref, onMounted, watch, toRefs } from 'vue';
import { ElNotification } from 'element-plus';
import Api from '@/api/model/sample'
import sysApi from '@/api/model/system'
import scTitle from '@/components/scTitle/index.vue'
const emit = defineEmits(['update:formData', 'update:indexData'])
const props = defineProps({
    configData: { type: Object, default: () => { } },
    formData: { type: Object, default: () => { } },
    disabled: { type: Boolean, default: false },
    indexData: { type: Array, default: () => [] },
    tempList: { type: Array, default: () => [] },
})
const form = ref({})
const tempList = ref([])
const cascader = ref(null)
const dataList = ref([])
const apiObj = ref(sysApi.select.query)
const appointStuffsRows = ref([])
const appointStuffsLabel = ref([])
const appointStuffsFileName = ref('ChooseStuffReport')
const tableProps = {
    label: 'name',
    value: 'name',
}
const casProps = ref({
    value: 'value',
    label: 'label',
    children: 'subTableRecords'
})
watch(dataList, (newValue) => {
    emit('update:indexData', newValue)
}, {
    deep: true
})
onMounted(() => {
    form.value = props.formData
    dataList.value = JSON.parse(JSON.stringify(props.indexData))
    console.log(dataList.value)
    tempList.value = props.tempList
    if (form.value.appointStuffs !== '') {
        let NameArr = form.value.appointStuffs.split(',')
        form.value.appointStuffsArray.forEach((item, index) => {
            let params = {
                name: NameArr[index],
                id: Number(item)
            }
            appointStuffsRows.value.push(params)
        })
    }
})

const appointStuffsChange = (val) => {
    let arr = []
    val.forEach(item => arr.push(item.name))
    form.value.appointStuffsArray = arr
}

const change = (val) => {
    form.value.motorUsesSmallCategoryId = val[1]
    let id = cascader.value.getCheckedNodes()[0].data.customer1
    id = id.split(',')
    let temp = JSON.parse(JSON.stringify(tempList.value))
    dataList.value = temp.filter(item =>
        id.indexOf(item.testParameterCode) >= 0
    )
}


</script>

<style lang="less" scoped>
.borderNone {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;

        .el-input__inner {
            cursor: default !important;
        }
    }
}</style>

